<!--
  ~ Copyright 2016 Red Hat, Inc. and/or its affiliates
  ~ and other contributors as indicated by the @author tags.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 0 8px 16px;
            text-decoration: none;

        }

        /* Change the link color on hover */
        li a:hover {
            background-color: #555;
            color: white;
        }

        .nav {
            float: left;
            width: 250px;
        }
        .content {
            margin-left: 270px;

        }
        pre {
            word-wrap: break-word;
            white-space: pre-wrap;
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>

<h1 style="width: 100%; text-align: center;">NodeJS Keycloak Example</h1>
<hr/>

<div class="nav">
    <ul>
        <li><a href="/login">Login</a></li>
        <li><a href="/protected/resource">Protected Resource</a></li>
        <li><a href="/logout">Logout</a></li>
    </ul>
</div>
<div class="content">
    <h2>Result</h2>
    <pre id="output">
{{result}}
    </pre>

    <h2>Events</h2>
    <pre id="events">
{{event}}
    </pre>
</div>


</body>
</html>
